<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SEMRUSH 数据分析 - 趋势图组件设计稿</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b',
                        success: '#10b981',
                        warning: '#f59e0b',
                        danger: '#ef4444',
                        light: '#f8fafc',
                        dark: '#1e293b'
                    }
                }
            }
        }
    </script>
    <style>
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .metric-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px;
            transition: all 0.3s ease;
        }
        
        .metric-card:hover {
            border-color: #3b82f6;
            box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
        }
        
        .trend-tab {
            padding: 12px 24px;
            border-radius: 8px;
            transition: all 0.3s ease;
            cursor: pointer;
            font-weight: 500;
        }
        
        .trend-tab.active {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }
        
        .trend-tab:not(.active) {
            background: #f8fafc;
            color: #64748b;
        }
        
        .trend-tab:not(.active):hover {
            background: #e2e8f0;
            color: #374151;
        }
        
        .chart-container {
            position: relative;
            height: 320px;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .ranking-badge {
            display: inline-block;
            width: 28px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            border-radius: 50%;
            font-weight: bold;
            font-size: 14px;
        }
        
        .rank-1 { background: #ef4444; color: white; }
        .rank-2 { background: #f59e0b; color: white; }
        .rank-3 { background: #3b82f6; color: white; }
        .rank-other { background: #e5e7eb; color: #6b7280; }
        
        .progress-ring {
            transform: rotate(-90deg);
        }
        
        .progress-ring-circle {
            stroke: #e5e7eb;
            stroke-width: 4;
            fill: transparent;
            stroke-linecap: round;
        }
        
        .progress-ring-progress {
            stroke: #3b82f6;
            stroke-width: 4;
            fill: transparent;
            stroke-linecap: round;
            stroke-dasharray: 251.2;
            stroke-dashoffset: 125.6;
            transition: stroke-dashoffset 1s ease;
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .modal-overlay {
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
        }
        
        .modal-content {
            background: white;
            border-radius: 16px;
            max-width: 95vw;
            max-height: 95vh;
            overflow-y: auto;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .trend-value {
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .trend-indicator {
            display: inline-flex;
            align-items: center;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .trend-up {
            background: #dcfce7;
            color: #166534;
        }
        
        .trend-down {
            background: #fee2e2;
            color: #991b1b;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <!-- Modal Overlay -->
    <div class="modal-overlay fixed inset-0 z-50 flex items-center justify-center p-4">
        <div class="modal-content w-full max-w-7xl fade-in">
            <!-- Header -->
            <div class="gradient-bg text-white p-6 rounded-t-16">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-4">
                        <div class="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center">
                            <i class="fas fa-chart-line text-2xl"></i>
                        </div>
                        <div>
                            <h2 class="text-2xl font-bold">SEMRUSH 数据分析</h2>
                            <p class="text-blue-100">journalnewsinfo.com</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <div class="glass-effect px-4 py-2 rounded-lg">
                            <i class="fas fa-hashtag mr-2"></i>
                            <span class="text-sm">Task ID: 5983363</span>
                        </div>
                        <button class="w-10 h-10 bg-white/20 hover:bg-white/30 rounded-lg flex items-center justify-center transition-colors">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Content -->
            <div class="p-6 space-y-6">
                <!-- Tab Navigation -->
                <div class="flex space-x-2 bg-gray-50 p-2 rounded-lg">
                    <button class="trend-tab active" onclick="switchTab('domain')">
                        <i class="fas fa-globe mr-2"></i>
                        外链域名趋势
                    </button>
                    <button class="trend-tab" onclick="switchTab('links')">
                        <i class="fas fa-link mr-2"></i>
                        外链精准链接趋势
                    </button>
                </div>

                <!-- Domain Trend Content -->
                <div id="domain-content" class="tab-content active space-y-6">
                    <!-- 流量数据概览 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        <div class="metric-card card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="text-sm text-gray-600 mb-1">自然流量</div>
                                    <div class="trend-value">1,363</div>
                                    <div class="trend-indicator trend-up mt-2">
                                        <i class="fas fa-arrow-up mr-1"></i>
                                        +12%
                                    </div>
                                </div>
                                <div class="w-16 h-16 relative">
                                    <svg class="progress-ring w-16 h-16">
                                        <circle class="progress-ring-circle" cx="32" cy="32" r="28"></circle>
                                        <circle class="progress-ring-progress" cx="32" cy="32" r="28" style="stroke-dashoffset: 50;"></circle>
                                    </svg>
                                    <div class="absolute inset-0 flex items-center justify-center">
                                        <i class="fas fa-chart-line text-blue-600"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="metric-card card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="text-sm text-gray-600 mb-1">付费流量</div>
                                    <div class="trend-value">0</div>
                                    <div class="trend-indicator trend-down mt-2">
                                        <i class="fas fa-minus mr-1"></i>
                                        0%
                                    </div>
                                </div>
                                <div class="w-16 h-16 relative">
                                    <svg class="progress-ring w-16 h-16">
                                        <circle class="progress-ring-circle" cx="32" cy="32" r="28"></circle>
                                        <circle class="progress-ring-progress" cx="32" cy="32" r="28" style="stroke: #ef4444; stroke-dashoffset: 251.2;"></circle>
                                    </svg>
                                    <div class="absolute inset-0 flex items-center justify-center">
                                        <i class="fas fa-dollar-sign text-red-600"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="metric-card card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="text-sm text-gray-600 mb-1">品牌流量</div>
                                    <div class="trend-value">0</div>
                                    <div class="trend-indicator trend-down mt-2">
                                        <i class="fas fa-minus mr-1"></i>
                                        0%
                                    </div>
                                </div>
                                <div class="w-16 h-16 relative">
                                    <svg class="progress-ring w-16 h-16">
                                        <circle class="progress-ring-circle" cx="32" cy="32" r="28"></circle>
                                        <circle class="progress-ring-progress" cx="32" cy="32" r="28" style="stroke: #f59e0b; stroke-dashoffset: 200;"></circle>
                                    </svg>
                                    <div class="absolute inset-0 flex items-center justify-center">
                                        <i class="fas fa-crown text-yellow-600"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="metric-card card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="text-sm text-gray-600 mb-1">流量价值</div>
                                    <div class="trend-value">$0</div>
                                    <div class="trend-indicator trend-down mt-2">
                                        <i class="fas fa-minus mr-1"></i>
                                        0%
                                    </div>
                                </div>
                                <div class="w-16 h-16 relative">
                                    <svg class="progress-ring w-16 h-16">
                                        <circle class="progress-ring-circle" cx="32" cy="32" r="28"></circle>
                                        <circle class="progress-ring-progress" cx="32" cy="32" r="28" style="stroke: #10b981; stroke-dashoffset: 180;"></circle>
                                    </svg>
                                    <div class="absolute inset-0 flex items-center justify-center">
                                        <i class="fas fa-coins text-green-600"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 趋势图表 -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <!-- 域名流量趋势 -->
                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="text-lg font-semibold text-gray-800">域名流量趋势</h3>
                                <div class="flex items-center space-x-2">
                                    <span class="w-3 h-3 bg-blue-500 rounded-full"></span>
                                    <span class="text-sm text-gray-600">总流量</span>
                                    <span class="w-3 h-3 bg-green-500 rounded-full ml-4"></span>
                                    <span class="text-sm text-gray-600">品牌流量</span>
                                </div>
                            </div>
                            <div class="chart-container">
                                <canvas id="trafficChart"></canvas>
                            </div>
                        </div>

                        <!-- 域名关键词趋势 -->
                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="text-lg font-semibold text-gray-800">域名关键词趋势</h3>
                                <div class="flex flex-wrap items-center gap-2 text-xs">
                                    <span class="flex items-center"><span class="w-2 h-2 bg-red-500 rounded-full mr-1"></span>排名前3</span>
                                    <span class="flex items-center"><span class="w-2 h-2 bg-yellow-500 rounded-full mr-1"></span>排名4-10</span>
                                    <span class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-1"></span>排名11-20</span>
                                    <span class="flex items-center"><span class="w-2 h-2 bg-purple-500 rounded-full mr-1"></span>SERP精选</span>
                                </div>
                            </div>
                            <div class="chart-container">
                                <canvas id="keywordChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Links Trend Content -->
                <div id="links-content" class="tab-content space-y-6">
                    <!-- 外链精准数据概览 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        <div class="metric-card card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="text-sm text-gray-600 mb-1">外链总数</div>
                                    <div class="trend-value">1,234</div>
                                    <div class="trend-indicator trend-up mt-2">
                                        <i class="fas fa-arrow-up mr-1"></i>
                                        +8%
                                    </div>
                                </div>
                                <div class="w-16 h-16 relative">
                                    <svg class="progress-ring w-16 h-16">
                                        <circle class="progress-ring-circle" cx="32" cy="32" r="28"></circle>
                                        <circle class="progress-ring-progress" cx="32" cy="32" r="28" style="stroke-dashoffset: 62.8;"></circle>
                                    </svg>
                                    <div class="absolute inset-0 flex items-center justify-center">
                                        <i class="fas fa-link text-blue-600"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="metric-card card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="text-sm text-gray-600 mb-1">有效外链</div>
                                    <div class="trend-value">892</div>
                                    <div class="trend-indicator trend-up mt-2">
                                        <i class="fas fa-arrow-up mr-1"></i>
                                        +15%
                                    </div>
                                </div>
                                <div class="w-16 h-16 relative">
                                    <svg class="progress-ring w-16 h-16">
                                        <circle class="progress-ring-circle" cx="32" cy="32" r="28"></circle>
                                        <circle class="progress-ring-progress" cx="32" cy="32" r="28" style="stroke: #10b981; stroke-dashoffset: 37.68;"></circle>
                                    </svg>
                                    <div class="absolute inset-0 flex items-center justify-center">
                                        <i class="fas fa-check-circle text-green-600"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="metric-card card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="text-sm text-gray-600 mb-1">Google友好</div>
                                    <div class="trend-value">654</div>
                                    <div class="trend-indicator trend-down mt-2">
                                        <i class="fas fa-arrow-down mr-1"></i>
                                        -3%
                                    </div>
                                </div>
                                <div class="w-16 h-16 relative">
                                    <svg class="progress-ring w-16 h-16">
                                        <circle class="progress-ring-circle" cx="32" cy="32" r="28"></circle>
                                        <circle class="progress-ring-progress" cx="32" cy="32" r="28" style="stroke: #f59e0b; stroke-dashoffset: 87.904;"></circle>
                                    </svg>
                                    <div class="absolute inset-0 flex items-center justify-center">
                                        <i class="fab fa-google text-yellow-600"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="metric-card card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="text-sm text-gray-600 mb-1">锚文本多样性</div>
                                    <div class="trend-value">85%</div>
                                    <div class="trend-indicator trend-up mt-2">
                                        <i class="fas fa-arrow-up mr-1"></i>
                                        +2%
                                    </div>
                                </div>
                                <div class="w-16 h-16 relative">
                                    <svg class="progress-ring w-16 h-16">
                                        <circle class="progress-ring-circle" cx="32" cy="32" r="28"></circle>
                                        <circle class="progress-ring-progress" cx="32" cy="32" r="28" style="stroke: #8b5cf6; stroke-dashoffset: 37.68;"></circle>
                                    </svg>
                                    <div class="absolute inset-0 flex items-center justify-center">
                                        <i class="fas fa-text-height text-purple-600"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 外链精准趋势图表 -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <!-- 外链数量趋势 -->
                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="text-lg font-semibold text-gray-800">外链数量趋势</h3>
                                <div class="flex items-center space-x-2">
                                    <span class="w-3 h-3 bg-blue-500 rounded-full"></span>
                                    <span class="text-sm text-gray-600">总外链</span>
                                    <span class="w-3 h-3 bg-green-500 rounded-full ml-4"></span>
                                    <span class="text-sm text-gray-600">有效外链</span>
                                </div>
                            </div>
                            <div class="chart-container">
                                <canvas id="linkChart"></canvas>
                            </div>
                        </div>

                        <!-- 外链质量趋势 -->
                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="text-lg font-semibold text-gray-800">外链质量趋势</h3>
                                <div class="flex flex-wrap items-center gap-2 text-xs">
                                    <span class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-1"></span>高质量</span>
                                    <span class="flex items-center"><span class="w-2 h-2 bg-yellow-500 rounded-full mr-1"></span>中等</span>
                                    <span class="flex items-center"><span class="w-2 h-2 bg-red-500 rounded-full mr-1"></span>低质量</span>
                                </div>
                            </div>
                            <div class="chart-container">
                                <canvas id="qualityChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Top Keywords 排行 -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="p-6 border-b border-gray-200">
                        <div class="flex items-center justify-between">
                            <h3 class="text-xl font-semibold text-gray-800">Top Keywords 排行</h3>
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-500">显示前</span>
                                <select class="border border-gray-300 rounded px-2 py-1 text-sm">
                                    <option>10</option>
                                    <option>20</option>
                                    <option>50</option>
                                </select>
                                <span class="text-sm text-gray-500">条</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">排名</th>
                                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">关键词</th>
                                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">流量</th>
                                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">搜索量</th>
                                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CPC占比</th>
                                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">流量占比</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="ranking-badge rank-1">1</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">luxury body powder</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">1,092</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                            1.15K
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                            0%
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                            0%
                                        </span>
                                    </td>
                                </tr>
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="ranking-badge rank-2">2</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">bigcommerce rest api</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">854</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                            2.06K
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                            0%
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                            0%
                                        </span>
                                    </td>
                                </tr>
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="ranking-badge rank-3">3</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">journal news.com</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">692</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                            980
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                            0%
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                            0%
                                        </span>
                                    </td>
                                </tr>
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="ranking-badge rank-other">4</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">adobe express generate image</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">456</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                            634
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                            0%
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                            0%
                                        </span>
                                    </td>
                                </tr>
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="ranking-badge rank-other">5</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">bigcommerce apis</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">324</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                            223
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                            0%
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                            0%
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Tab 切换功能
        function switchTab(tab) {
            // 移除所有tab的active类
            document.querySelectorAll('.trend-tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
            
            // 添加当前tab的active类
            event.target.classList.add('active');
            document.getElementById(tab + '-content').classList.add('active');
            
            // 重新初始化图表
            setTimeout(() => {
                initCharts();
            }, 100);
        }

        // 初始化图表
        function initCharts() {
            // 流量趋势图
            const trafficCtx = document.getElementById('trafficChart');
            if (trafficCtx) {
                new Chart(trafficCtx, {
                    type: 'line',
                    data: {
                        labels: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06'],
                        datasets: [{
                            label: '总流量',
                            data: [1200, 1400, 1100, 1600, 1300, 1363],
                            borderColor: '#3b82f6',
                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
                            fill: true,
                            tension: 0.4
                        }, {
                            label: '品牌流量',
                            data: [300, 350, 250, 400, 320, 280],
                            borderColor: '#10b981',
                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
                            fill: true,
                            tension: 0.4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: '#f3f4f6'
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                }
                            }
                        }
                    }
                });
            }

            // 关键词趋势图
            const keywordCtx = document.getElementById('keywordChart');
            if (keywordCtx) {
                new Chart(keywordCtx, {
                    type: 'line',
                    data: {
                        labels: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06'],
                        datasets: [{
                            label: '排名前3',
                            data: [25, 30, 28, 35, 32, 38],
                            borderColor: '#ef4444',
                            backgroundColor: 'rgba(239, 68, 68, 0.1)',
                            fill: false,
                            tension: 0.4
                        }, {
                            label: '排名4-10',
                            data: [45, 50, 42, 55, 48, 52],
                            borderColor: '#f59e0b',
                            backgroundColor: 'rgba(245, 158, 11, 0.1)',
                            fill: false,
                            tension: 0.4
                        }, {
                            label: '排名11-20',
                            data: [20, 25, 18, 30, 22, 28],
                            borderColor: '#3b82f6',
                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
                            fill: false,
                            tension: 0.4
                        }, {
                            label: 'SERP精选',
                            data: [5, 8, 6, 10, 7, 9],
                            borderColor: '#8b5cf6',
                            backgroundColor: 'rgba(139, 92, 246, 0.1)',
                            fill: false,
                            tension: 0.4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: '#f3f4f6'
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                }
                            }
                        }
                    }
                });
            }

            // 外链数量趋势图
            const linkCtx = document.getElementById('linkChart');
            if (linkCtx) {
                new Chart(linkCtx, {
                    type: 'line',
                    data: {
                        labels: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06'],
                        datasets: [{
                            label: '总外链',
                            data: [1000, 1150, 1080, 1300, 1200, 1234],
                            borderColor: '#3b82f6',
                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
                            fill: true,
                            tension: 0.4
                        }, {
                            label: '有效外链',
                            data: [720, 830, 750, 950, 850, 892],
                            borderColor: '#10b981',
                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
                            fill: true,
                            tension: 0.4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: '#f3f4f6'
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                }
                            }
                        }
                    }
                });
            }

            // 外链质量趋势图
            const qualityCtx = document.getElementById('qualityChart');
            if (qualityCtx) {
                new Chart(qualityCtx, {
                    type: 'line',
                    data: {
                        labels: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06'],
                        datasets: [{
                            label: '高质量',
                            data: [400, 450, 420, 500, 480, 520],
                            borderColor: '#10b981',
                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
                            fill: false,
                            tension: 0.4
                        }, {
                            label: '中等',
                            data: [320, 380, 330, 400, 370, 372],
                            borderColor: '#f59e0b',
                            backgroundColor: 'rgba(245, 158, 11, 0.1)',
                            fill: false,
                            tension: 0.4
                        }, {
                            label: '低质量',
                            data: [280, 320, 330, 400, 350, 342],
                            borderColor: '#ef4444',
                            backgroundColor: 'rgba(239, 68, 68, 0.1)',
                            fill: false,
                            tension: 0.4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: '#f3f4f6'
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                }
                            }
                        }
                    }
                });
            }
        }

        // 页面加载完成后初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            initCharts();
        });
    </script>
</body>
</html> 